"use client";
import "./globals.css";
import { ConfigProvider } from "antd";
import Header from "@/components/Header";
import { usePathname } from "next/navigation";
import { Suspense } from "react";
import Loading from "./loading";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const pathname = usePathname();
  const isAuthPage = pathname === "/login" || pathname === "/register";

  return (
    <html lang="en">
      <body className="w-full bg-white">
        {isAuthPage ? (
          <div className="bg-white min-h-screen">{children}</div>
        ) : (
          <div className="bg-white container mx-auto">
            <ConfigProvider
              theme={{
                token: {
                  colorPrimary: "#000",
                  borderRadius: 6,
                },
                components: {
                  Layout: {
                    headerBg: "#fff",
                    colorText: "#000",
                  },
                  Button: {
                    colorPrimary: "#000",
                  },
                },
              }}
            >
              <div className="p-4">
                <Header />
                <div className="bg-white min-h-screen">
                  <Suspense fallback={<Loading />}>{children}</Suspense>
                </div>
              </div>
            </ConfigProvider>
          </div>
        )}
      </body>
    </html>
  );
}
